import { Button, Card, InputNumber, Radio, Slider } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './UserList.less';

export interface UserItem {
  index: number;
  name?: string;
  sex: string;
  waitTime: string;
}

const UserList: React.FC = (props) => {
  const [status, setStatus] = React.useState(1);
  const [list, setList] = useState([]);
  useEffect(() => {
    const item: UserItem = {
      index: 1,
      name: '1hao',
      sex: 'name',
      waitTime: '22分钟',
    };
    const thislist: UserItem[] = [];
    for (let i = 0; i < 10; i++) {
      const thisitem = JSON.parse(JSON.stringify(item));
      thisitem.index = i + 2;
      thislist[i] = thisitem;
    }
    setList(thislist);
  }, []);
  const onStatusChange = (e) => {
    console.log('radio checked', e.target.value);
    setStatus(e.target.value);
  };
  return (
    <div className={styles.main}>
      {/* 接诊状态 */}
      <Radio.Group onChange={onStatusChange} value={status}>
        <Radio value={1}>可接诊</Radio>
        <Radio value={2}>忙碌中</Radio>
        <Radio value={3}>已下线</Radio>
      </Radio.Group>

      <div className={styles.btn_group}>
        <Button type="primary">在线10人</Button>
        <Button>待结0人</Button>
        <Button>留言0人</Button>
      </div>

      {/* 患者列表 */}
      <div className={styles.list}>
        <Card bordered={false} title="患者列表">
          <div className={styles.header}>
            <div className={styles.index}>排序</div>
            <div className={styles.name}>患者姓名</div>
            <div className={styles.sex}>性别</div>
            <div className={styles.time}>等待时间</div>
          </div>
          {list.length > 0 &&
            list.map((item: UserItem, index) => (
              <div className={styles.list_item} key={item.index}>
                <div className={styles.index}>{index + 1}</div>
                <div className={styles.name}>{item.name}</div>
                <div className={styles.sex}>{item.sex}</div>
                <div className={styles.time}>{item.waitTime}</div>
              </div>
            ))}
        </Card>
      </div>

      {/* 接诊设置 */}
      <div className={styles.setting}>
        <Card bordered={false} title="接诊设置" style={{ height: 'auto' }}>
          <div className={styles.setting_box}>
            <div className={styles.slider_name}>同时接诊人数</div>
            <Slider defaultValue={10} max={10} />
          </div>
        </Card>
      </div>
    </div>
  );
};

export default UserList;
